<template>
	<view style="padding:50rpx;">
		<view style="height:150rpx;"></view>
		<view class="gui-flex gui-rows gui-justify-content-center">
			<text class="login-logo gui-icons gui-color-white gui-block-text gui-border-box gui-bg-black gui-box-shadow gui-box">&#xe620;</text>
		</view>
		<view style="margin-top:80rpx;">
			<form @submit="submit">
				<view>
					<text class="gui-text-small gui-color-gray">手机号</text>
				</view>
				<view class="gui-border-b">
					<input type="number" class="gui-form-input" v-model="phoneno" 
					name="phoneno" placeholder="您的手机号" />
				</view>
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray">短信验证码</text>
				</view>
				<view class="gui-border-b gui-flex gui-rows gui-nowrap gui-align-items-center">
					<input type="number" class="gui-form-input" 
					style="width:200rpx; flex:1;" 
					name="pwd" placeholder="短信验证码" />
					<text class="sendmsg gui-block-text gui-border-l gui-text-right" @tap="getVCode">{{vcodeBtnName}}</text>
				</view>
				<view class="gui-margin-top gui-flex gui-rows gui-space-between" 
				hover-class="gui-tap">
					<text></text>
					<text class="gui-text gui-color-gray gui-block-text gui-text-right" @tap="loginbypwd">密码登录</text>
				</view>
				<view style="margin-top:38rpx;">
					<button type="default" class="gui-button gui-bg-black" formType="submit" 
					style="border-radius:50rpx;">
						<text class="gui-color-white gui-button-text">登 录</text>
					</button>
				</view>
			</form>
		</view>
		
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
			<view class="gui-title-line"></view>
			<text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
			<view class="gui-title-line"></view>
		</view>
		<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-margin-top">
			<view class="other-login-icons" hover-class="gui-tap">
				<text class="other-login-icons gui-icons">&#xe63e;</text>
			</view>
			<view class="other-login-icons" hover-class="gui-tap">
				<text class="other-login-icons gui-icons">&#xe6cd;</text>
			</view>
		</view>
	</view>
</template>
<script>
var graceChecker = require("@/GraceUI5/js/checker.js");
export default {
	data() {
		return {
			phoneno        : '',
			vcodeBtnName   : "发送验证码",
			countNum       : 120,
			countDownTimer : null,
		}
	},
	methods: {
		loginbypwd  : function () { console.log('请自行完善代码'); },
		getVCode    : function(){
			var myreg=/^[1][0-9]{10}$/;
			if (!myreg.test(this.phoneno)){
				uni.showToast({ title: '请正确填写手机号码', icon : "none"});
				return false;
			}
			// 手机号码为 :  this.phoneno
			// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
			if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送'){return ;}
			this.vcodeBtnName =  "发送中...";
			// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
			// 假设发送成功，给用户提示
			uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
			// 倒计时
			this.countNum       = 60;
			this.countDownTimer = setInterval(()=>{this.countDown();}, 1000);
		},
		countDown   : function(){
			if (this.countNum < 1){
			  clearInterval(this.countDownTimer);
			  this.vcodeBtnName = "重新发送";
			  return ;
			}
			this.countNum--;
			this.vcodeBtnName = this.countNum + '秒重发';
		},
		submit : function(e){
			console.log(e.detail.value);
			// 请利用 graceUI 的表单验证工具
			// 根据项目需要完成数据验证工作
			var formData = e.detail.value;
			console.log(formData);
			// 利用 graceUI 的表单验证工具进行验证
			//定义表单规则
			var rule = [
				{name:"phoneno", checkType : "phoneno", checkRule:"", errorMsg:"手机号码有误"},
				{name:"pwd", checkType : "string", checkRule:"4,6", errorMsg:"短信验证码错误"},
			];
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){ 
				uni.showToast({title:"验证通过!", icon:"none"});
				// 根据项目需要完成数据验证工作
			}else{
				uni.showToast({ title:graceChecker.error, icon: "none" });
			}
		}
	}
}
</script>
<style>
.login-logo{width:180rpx; height:180rpx; font-size:80rpx; text-align:center; line-height:120rpx; padding:30rpx; border-radius:18rpx;}
.other-login-icons{width:88rpx; height:88rpx; text-align:center; font-size:70rpx; margin:20rpx;}
.sendmsg{height:30rpx; width:200rpx; font-size:24rpx; line-height:30rpx;}
</style>